<template>
	<view class="detail-box w100" v-if="orderInfo">
		<!-- 订单详情 -->
		<view class="detail-top flex-row-center w100">
			<view class="icon-box">
				<up-icon name="clock" color="#66DEC2" size="68rpx"></up-icon>
			</view>
			<text class="name" v-if="orderInfo?.status==0">订单待接单</text>
			<text class="name" v-else-if="orderInfo?.status==1">订单待处理</text>
			<text class="name" v-else-if="orderInfo?.status==2">订单已取消</text>
			<text class="name" v-else-if="orderInfo?.status==3">订单已开始</text>
			<text class="name" v-else-if="orderInfo?.status==4">订单已完成</text>
		</view>
		<!-- 订单内容 -->
		<view class="detail-content w100 flex" v-if="orderInfo" @click="toTeam(orderInfo.relation_info.t_id)">
			<view class="order-img">
				<up-image :src="orderInfo.relation_info.url" width="168rpx" height="168rpx" radius="12rpx"></up-image>
			</view>
			<view class="order-info flex">
				<view class="order-title ">
					<text class="title">{{orderInfo.relation_info.title}}</text>
				</view>
				<!-- <text class="price">￥100</text> -->
				<text
					class="tips">座位：{{orderInfo.relation_info.join_number}}/{{orderInfo.relation_info.number_people}}</text>
				<text
					class="tips">时间：{{orderInfo.relation_info.start_date_text}}~{{orderInfo.relation_info.end_date_text}}</text>
			</view>
		</view>
		<!-- 地址信息 -->
		<view class="address-info-box"
			@click="openMap(orderInfo.extends.lat,orderInfo.extends.long,orderInfo.extends.address)">
			<!-- <image src="@/page_assistant/static/map_bg.png" mode=""  class="address-bg"></image> -->
			<view class="address-info flex-row-center">
				<view class="address-left flex">
					<view class="address-icon">
						<up-icon name="map" color="#B8DED0" size="28rpx"></up-icon>
					</view>
					<view class="address-box flex">
						<text class="address">{{orderInfo.extends.address}}</text>
						<text class="distance">距离你{{orderInfo.extends.distance}}km</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="info-box w100">
			<!-- <view class="info-list w100 flex-row-center">
				<text class="text">联系电话：</text>
				<view class="flex-row-center">
					<text class="text" style="margin-right: 8rpx;">1987987987</text>
					<up-icon name="phone" color="#66DEC2" size="28rpx"></up-icon>
				</view>
			</view> -->
			<view class="info-list w100 flex-row-center">
				<text class="text">订单号：</text>
				<view class="flex-row-center" @click="copyOrderId(orderInfo)">
					<text class="text" style="margin-right: 8rpx;">{{orderInfo.order}}</text>
					<up-icon name="order" color="#66DEC2" size="28rpx"></up-icon>
				</view>
			</view>
			<view class="info-list w100 flex-row-center">
				<text class="text">提交时间：</text>
				<text class="text">{{orderInfo.create_time_text}}</text>
			</view>
			<view class="info-list w100 flex-row-center">
				<text class="text">助教费用：</text>
				<text class="price">￥{{orderInfo.amount}}</text>
			</view>
			<view class="info-list w100 flex-row-center" v-if="orderInfo.distance_amount&&orderInfo.distance_amount>0">
				<text class="text">往返费用：</text>
				<text class="price">￥{{orderInfo.distance_amount}}</text>
			</view>
			<view class="info-list w100 flex-row-center" v-if="orderInfo.discount_amount&&orderInfo.discount_amount>0">
				<text class="text">优惠金额：</text>
				<text class="price">￥{{orderInfo.discount_amount}}</text>
			</view>
			<view class="info-list w100 flex-row-center">
				<text class="text">合计：</text>
				<text class="price">￥{{orderInfo.real_amount}}</text>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="detail-footre w100">
			<view class="footer-box w100 flex-row-center" v-if="orderInfo.status==0">
				<view class="close-btn flex-center" @click.stop="closeOrder(orderInfo)">
					<text class="text">取消订单</text>
				</view>
				<view class="confim-btn flex-center" @click.stop="confimOrder(orderInfo)">
					<text class="text">确认订单</text>
				</view>
			</view>
			<view class="footer-box w100 flex-row-center" v-else-if="orderInfo.status==1">
				<view class="close-btn flex-center" @click.stop="closeOrder(orderInfo)">
					<text class="text">取消订单</text>
				</view>
				<view class="confim-btn flex-center" @click.stop="StartOrder(orderInfo)">
					<text class="text">开始订单</text>
				</view>
			</view>
			<view class="footer-box w100 flex-row-center" v-else-if="orderInfo.status==3">
				<view class="confim-btn flex-center" @click.stop="endOrder(orderInfo)">
					<text class="text">结束订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		isMillisecondTimestamp,
	} from '@/utils/utools.js';
	import {
		assistantStore
	} from '@/stores/assistant';
	const assistantStoreInfo = assistantStore();
	const orderInfo = ref(computed(() => assistantStoreInfo.assistantOrder))
	onUnload(() => {
		assistantStoreInfo.setAssistantOrder(null);
	});
	const toTeam = (id) => {
		uni.navigateTo({
			url: '/page_main/views/teamDetails?id=' + id
		})
	}
	const confimOrder = (item) => { //确认订单
		uni.showModal({
			title: '提示',
			content: '确认接受此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.confimOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '接受成功！'
						})
						assistantStoreInfo.assistantOrder.status = 1;
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	const closeOrder = (item) => { //取消订单
		uni.showModal({
			title: '提示',
			content: '确认取消此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.refundOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '取消成功！'
						})
						assistantStoreInfo.assistantOrder.status = 2;
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	const StartOrder = (item) => {
		if (item.order_start_time) {
			let start_date = item.order_start_time;
			let startDate = isMillisecondTimestamp(start_date) ? start_date : start_date * 1000;
			const timestamp = new Date().valueOf(); //当前毫秒级时间戳
			if (startDate > timestamp) {
				uni.$u.toast('还未到预约时间，无法开始')
				return
			}
		}
		uni.showModal({
			title: '提示',
			content: '确认开始此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.startOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '接受成功！'
						})
						assistantStoreInfo.assistantOrder.status = 3;
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const endOrder = (item) => {
		uni.showModal({
			title: '提示',
			content: '确认结束此订单？',
			success: async (res) => {
				if (res.confirm) {
					const ress = await $Api.assistant.endOrder({
						id: item.id
					})
					if (ress.code == 1) {
						uni.showToast({
							title: '结束成功！'
						})
						assistantStoreInfo.assistantOrder.status = 4;
					} else {
						uni.$u.toast(ress.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const copyOrderId = (item) => {
		uni.setClipboardData({
			data: item.order,
			success: function() {
				uni.$u.toast('复制成功');
			}
		});

	}
	const openMap = (latitude = 30.615869, longitude = 104.067839, address = "预约地址") => { //打开地图
		uni.openLocation({
			latitude: parseFloat(latitude),
			longitude: parseFloat(longitude),
			name: '预约地点',
			address: address,
			success: function(res) {
				console.log('打开系统位置地图成功')
			},
			fail: function(error) {
				console.log(error)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.detail-box {
		padding: 36rpx 24rpx;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.detail-top {
		.name {
			margin-left: 16rpx;
			color: $name-color;
			font-size: 38rpx;
			font-weight: bold;
		}
	}

	.detail-content {
		border-radius: 16rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;

		.order-info {
			width: 0;
			flex: 1;
			margin-left: 14rpx;
			flex-direction: column;
			white-space: normal;

			.order-title {
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.title {
				width: 100%;
				color: $name-color;
				font-size: 28rpx;

			}

			.tips {
				color: $description-color;
				font-size: 28rpx;
				margin-top: 8rpx;
				white-space: normal;
				// word-wrap: break-word;
				word-break: break-all;
			}

			.price {
				color: $price-color;
				font-size: 32rpx;
				margin-top: 12rpx;
			}
		}

		.order-price {}
	}

	.address-info-box {
		margin-top: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;
		position: relative;
		z-index: 9;
		height: 120rpx;

		.address-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.address-info {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: rgba(34, 37, 40, 0.8);
		justify-content: space-between;

		.address-icon {
			transform: translateY(8rpx);
		}

		.address-left {
			align-items: flex-start;
		}

		.address-box {
			flex-direction: column;
			margin-left: 10rpx;

			.address {
				font-weight: bold;
				font-size: 28rpx;
				color: #B8DED0;
				margin-bottom: 8rpx;
			}

			.distance {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #7F998F;
			}
		}

		.address-btn {
			width: 56rpx;
			height: 56rpx;
			flex-shrink: 0;
		}
	}

	.info-box {
		border-radius: 16rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;

		.info-list {
			justify-content: space-between;

			&:not(:last-child) {
				margin-bottom: 18rpx;
			}

			.text {
				color: $description-color;
				font-size: 28rpx;
			}

			.price {
				color: $price-color;
				font-size: 28rpx;
			}
		}
	}

	.detail-footre {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #191C1F;
		border-top: 2rpx solid #303335;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer-box {
		height: 100rpx;
		padding: 0 24rpx;
		justify-content: flex-end;
	}

	.close-btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1rpx solid $noActive-text-color;
		color: $noActive-text-color;
		font-size: 24rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.confim-btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: $btn-bg-color;
		color: $btn-text-color;
		font-size: 24rpx;
	}
</style>